
import React from 'react';
import { 
  ShoppingBag, 
  Search, 
  Heart, 
  Pill, 
  Dumbbell, 
  Apple, 
  Utensils, 
  ShoppingCart,
  Star
} from 'lucide-react';
import DashboardCard from '@/components/DashboardCard';
import { useInView } from '@/utils/animation';

const HealthStore = () => {
  const { ref: headerRef, isInView: headerIsVisible } = useInView();
  const { ref: categoriesRef, isInView: categoriesAreVisible } = useInView(0.1);
  const { ref: productsRef, isInView: productsAreVisible } = useInView(0.1);

  // Categories data
  const categories = [
    {
      name: '营养补充',
      icon: <Pill className="h-6 w-6" />,
      count: 48,
      gradient: 'linear-gradient(120deg, #4FD1C5 0%, #63B3ED 100%)'
    },
    {
      name: '健身器材',
      icon: <Dumbbell className="h-6 w-6" />,
      count: 35,
      gradient: 'linear-gradient(120deg, #F87171 0%, #FCA5A5 100%)'
    },
    {
      name: '健康食品',
      icon: <Apple className="h-6 w-6" />,
      count: 64,
      gradient: 'linear-gradient(120deg, #A78BFA 0%, #C4B5FD 100%)'
    },
    {
      name: '烹饪工具',
      icon: <Utensils className="h-6 w-6" />,
      count: 29,
      gradient: 'linear-gradient(120deg, #FBBF24 0%, #FCD34D 100%)'
    }
  ];

  // Featured products data
  const featuredProducts = [
    {
      name: '高级蛋白质粉',
      category: '营养补充',
      price: 299,
      originalPrice: 359,
      rating: 4.8,
      reviewCount: 156,
      image: 'placeholder.svg',
      tag: '热卖'
    },
    {
      name: '可折叠瑜伽垫',
      category: '健身器材',
      price: 199,
      originalPrice: 249,
      rating: 4.6,
      reviewCount: 98,
      image: 'placeholder.svg',
      tag: '新品'
    },
    {
      name: '有机藜麦',
      category: '健康食品',
      price: 69,
      originalPrice: null,
      rating: 4.9,
      reviewCount: 203,
      image: 'placeholder.svg',
      tag: '有机'
    },
    {
      name: '智能水壶',
      category: '厨房工具',
      price: 239,
      originalPrice: 299,
      rating: 4.7,
      reviewCount: 127,
      image: 'placeholder.svg',
      tag: '智能'
    },
    {
      name: '维生素 D3 片',
      category: '营养补充',
      price: 129,
      originalPrice: 159,
      rating: 4.9,
      reviewCount: 174,
      image: 'placeholder.svg',
      tag: '医生推荐'
    },
    {
      name: '健身环',
      category: '健身器材',
      price: 459,
      originalPrice: 599,
      rating: 4.7,
      reviewCount: 321,
      image: 'placeholder.svg',
      tag: '畅销'
    }
  ];

  return (
    <div className="min-h-screen pt-20 px-6 md:px-10 pb-10">
      {/* Header Section */}
      <section 
        ref={headerRef}
        className={`max-w-7xl mx-auto mb-12 transition-all duration-700 delay-100 ${
          headerIsVisible ? 'opacity-100' : 'opacity-0 translate-y-10'
        }`}
      >
        <div className="text-center">
          <span className="inline-block bg-primary/10 text-primary px-4 py-1.5 rounded-full text-sm font-medium mb-4">
            健康商城
          </span>
          <h1 className="text-3xl md:text-4xl font-bold mb-4">
            精选健康好物
          </h1>
          <p className="text-foreground/70 max-w-2xl mx-auto">
            为您提供优质健康产品，支持您的健康生活方式
          </p>
        </div>
      </section>

      {/* Search Bar */}
      <section className="max-w-7xl mx-auto mb-10">
        <div className="glass-card rounded-xl p-6">
          <div className="flex flex-col md:flex-row gap-4">
            <div className="relative flex-1">
              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-foreground/50 h-5 w-5" />
              <input 
                type="text" 
                placeholder="搜索产品..." 
                className="w-full pl-10 pr-4 py-2.5 rounded-lg border border-border bg-white focus:outline-none focus:ring-2 focus:ring-primary/30 transition-all"
              />
            </div>
            <div className="flex gap-4">
              <select className="px-4 py-2.5 rounded-lg border border-border bg-white focus:outline-none focus:ring-2 focus:ring-primary/30 transition-all">
                <option value="">全部分类</option>
                <option value="supplements">营养补充</option>
                <option value="fitness">健身器材</option>
                <option value="food">健康食品</option>
                <option value="kitchen">厨房工具</option>
              </select>
              <select className="px-4 py-2.5 rounded-lg border border-border bg-white focus:outline-none focus:ring-2 focus:ring-primary/30 transition-all">
                <option value="">价格排序</option>
                <option value="price-asc">价格低到高</option>
                <option value="price-desc">价格高到低</option>
                <option value="rating">评分最高</option>
              </select>
            </div>
          </div>
        </div>
      </section>

      {/* Categories */}
      <section 
        ref={categoriesRef}
        className={`max-w-7xl mx-auto mb-10 transition-all duration-700 delay-200 ${
          categoriesAreVisible ? 'opacity-100' : 'opacity-0 translate-y-10'
        }`}
      >
        <h2 className="text-2xl font-semibold mb-6">产品分类</h2>
        <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
          {categories.map((category, index) => (
            <DashboardCard
              key={category.name}
              title={category.name}
              icon={category.icon}
              gradient={category.gradient}
              className={`transition-all duration-500 delay-${index * 100} cursor-pointer`}
            >
              <div className="mt-4">
                <p className="text-foreground/70 mb-3">{category.count} 件产品</p>
                <div className="flex justify-end">
                  <span className="text-primary font-medium inline-flex items-center">
                    浏览
                    <svg className="ml-1 w-4 h-4 group-hover/card:translate-x-1 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                    </svg>
                  </span>
                </div>
              </div>
            </DashboardCard>
          ))}
        </div>
      </section>

      {/* Featured Products */}
      <section 
        ref={productsRef}
        className={`max-w-7xl mx-auto transition-all duration-700 delay-300 ${
          productsAreVisible ? 'opacity-100' : 'opacity-0 translate-y-10'
        }`}
      >
        <div className="flex items-center justify-between mb-6">
          <h2 className="text-2xl font-semibold">精选产品</h2>
          <button className="text-primary font-medium flex items-center">
            查看全部 
            <svg className="ml-1 w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
            </svg>
          </button>
        </div>
        
        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
          {featuredProducts.map((product, index) => (
            <div 
              key={product.name} 
              className="glass-card rounded-xl overflow-hidden transition-all duration-500 delay-100 group"
            >
              <div className="relative h-48 bg-muted">
                <img 
                  src={product.image} 
                  alt={product.name} 
                  className="w-full h-full object-cover"
                />
                {product.tag && (
                  <span className="absolute top-4 left-4 bg-primary text-white text-xs px-2 py-1 rounded-full">
                    {product.tag}
                  </span>
                )}
                <button className="absolute top-4 right-4 bg-white/80 hover:bg-white p-2 rounded-full transition-all">
                  <Heart className="h-4 w-4" />
                </button>
              </div>
              
              <div className="p-5">
                <div className="mb-2">
                  <span className="text-xs text-foreground/60">{product.category}</span>
                </div>
                <h3 className="font-semibold mb-2 group-hover:text-primary transition-colors">{product.name}</h3>
                
                <div className="flex items-center mb-3">
                  <div className="flex items-center mr-2">
                    <Star className="h-4 w-4 text-amber-500 fill-amber-500" />
                    <span className="text-sm ml-1">{product.rating}</span>
                  </div>
                  <span className="text-xs text-foreground/60">({product.reviewCount} 评价)</span>
                </div>
                
                <div className="flex items-center justify-between">
                  <div className="flex items-center">
                    <span className="font-bold text-lg">¥{product.price}</span>
                    {product.originalPrice && (
                      <span className="text-foreground/60 text-sm line-through ml-2">
                        ¥{product.originalPrice}
                      </span>
                    )}
                  </div>
                  <button className="bg-primary hover:bg-primary/90 text-white p-2 rounded-full transition-colors">
                    <ShoppingCart className="h-4 w-4" />
                  </button>
                </div>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* Promotion Banner */}
      <section className="max-w-7xl mx-auto mt-16">
        <div className="glass-card rounded-xl p-8 relative overflow-hidden">
          <div className="absolute inset-0 bg-gradient-to-r from-dopamine-teal/20 via-dopamine-purple/20 to-dopamine-coral/20 z-0"></div>
          <div className="relative z-10 flex flex-col md:flex-row items-center justify-between">
            <div className="mb-6 md:mb-0">
              <h2 className="text-2xl font-bold mb-2">会员专享优惠</h2>
              <p className="text-foreground/70 max-w-md">
                成为会员即可享受专属折扣、积分奖励和个性化健康建议
              </p>
            </div>
            <button className="bg-primary hover:bg-primary/90 text-white px-6 py-2.5 rounded-lg transition-colors">
              立即加入
            </button>
          </div>
        </div>
      </section>
    </div>
  );
};

export default HealthStore;
